<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>列表过滤</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body> 
    <!-- 准备一个容器 -->
    <div id="root">
      <!-- 遍历数组 -->
      <h2>人员列表</h2>
      <input type="text" placeholder="请输入名字" v-model="keyword">
      <ul>
        <li v-for="(p,index) in fillPersons" :key="p.id">
          {{p.name}} - {{p.age}} - {{p.sex}}
        </li>
      </ul>

    </div>
</body>
<script type="text/javascript" >
    Vue.config.productionTip = false; // 组织 Vue 在启动时生成生产提示

    new Vue({
        el: '#root',
        data:{
          keyword:'',
          persons: [
            {id:'001', name:'马冬梅', age: 18, sex: '女'},
            {id:'002', name:'周冬雨', age: 19, sex: '女'},
            {id:'003', name:'周杰伦', age: 20, sex: '男'},
            {id:'004', name:'温兆伦', age: 21, sex: '男'}
          ],
          // fillPersons:[] // watch 实现 列表过滤
        },
      /*  watch:{ // watch 实现 列表过滤
          keyword:{
            immediate:true,
            handler(value){
              this.fillPersons = this.persons.filter((p) => {
                return p.name.indexOf(value) !== -1
              })
            }
          }
        } */
        computed:{ // 计算属性 实现 列表过滤
          fillPersons(){
            return this.persons.filter((p) => {
              return p.name.indexOf(this.keyword) !== -1
            })
          }
        }
    })
</script>
</html>